<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				margin: 0;
			}
			.popup {
				width: 700px;
				/* background-color: rgba(0, 0, 0, 0.5); */
				/* border: 2px solid rgba(2, 171, 255, 0.8); */
				background-image: url(./img/bg2.png);
				background-size: 100% 100%;
				padding-left: 130px;
			}
			header {
				padding-left: 40px;
				display: flex;
				align-items: center;
				font-size: 26px;
				/* background: linear-gradient(270deg, rgba(5, 63, 113, 0) 0%, rgba(2, 171, 255, 0.6) 100%); */
				height: 50px;
				line-height: 100px;
				color: #fff;
			}
			header::before {
				/* display: block;
				width: 26px;
				height: 26px;
				content: '';
				/* background-color: #02abff; */
				border-radius: 50%;
				margin-right: 20px;
			}
			.content {
				display: flex;
				padding: 20px 10px;
				font-size: 14px;
			}
			.left {
				margin-right: 20px;
			}
			.title {
				color: #fff;
				padding: 10px 0;
				background-image: url(./img/popupTitle.png);
				background-size: 100% 100%;
				padding-left: 40px;
				margin-left: -10px;
			}
			.center {
				padding: 20px 20px;
				background: rgba(3, 7, 17, 0.2);
				color: #fff;
			}
			.icon {
				width: 15px;
				height: 15px;
			}
			.title1 {
				color: #fff;
				display: flex;
				align-items: center;
				display: flex;
				justify-content: space-between
			}
			.span1 {
				padding: 3px 13px;
				background: linear-gradient(180deg, #0a6e8a 0%, #1e9cbf 99%);
				border-radius: 5px;
				color: #fff;
				margin-right: 5px;
			}
			.span2 {
				color: #14b7e4;
				margin-left: 5px;
			}
			.box:nth-child(n + 2) {
				margin-top: 37px;
			}
			.mark {
				color: #ffc16a;
			}
			.key {
				width: 200px;
			}
			.title2 {
				display: flex;
				color: #fff;
				margin: 10px 0;
			}
			.content > div {
				flex: 1;
			}
			.finnaal_station{
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				margin: 10px 0;
			}
			.common-flex{
				display: flex;
				align-items: center
			}
			.common-flex img {
				width: 15px;
				height: 15px
			 }
		</style>
	</head>
	<body>
		<div class="popup">
			<header>交通信息</header>
			<div class="content">
				<div class="left">
					<div class="item">
						<div class="title">
							<img src="./img/公交@1x.png" alt="" style="width: 20px; height: 20px; vertical-align: middle" />
							地面公交<img
								src="./img/icon2.png"
								alt=""
								style="width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; float: right"
							/>
							<img
								src="./img/icon1.png"
								alt=""
								style="width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; float: right"
							/>
						</div>
						<div class="center">
							<div class="box bus_center">
							</div>
						</div>
					</div>
					<div class="item">
						<div class="title">
							<img src="./img/出租车.png" alt="" style="width: 20px; height: 20px; vertical-align: middle" />出租车<img
								src="./img/icon4.png"
								alt=""
								style="width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; float: right"
							/>
						</div>
						<div class="center taxi_center">
						</div>
					</div>
				</div>
				<div class="right">
					<div class="item">
						<div class="title">
							<img src="./img/轨道.png" alt="" style="width: 20px; height: 20px; vertical-align: middle" />轨道交通
							<img
								src="./img/icon3.png"
								alt=""
								style="width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; float: right"
							/>轨道交通
						</div>
						<div class="center subway_center">
							<!-- <div class="box">
								<div class="title1">
									<span class="span1" style="background: linear-gradient(180deg, #2440df 0%, #556ef7 99%)">10号线</span>
								</div>
								<div style="margin-top: 10px">
									<div style="display: flex; width: 100%; justify-content: space-between; align-items: center">
										<span class="key1">上行方向：全程</span>
										<span style="display: flex; align-items: center"
											><img src="./img/时间2.png" alt="" style="width: 15px; height: 15px" /> 5:16 — 21:16</span
										>
									</div>
									<div
										style="
											display: flex;
											width: 100%;
											justify-content: space-between;
											align-items: center;
											margin-top: 10px;
										"
									>
										<span class="key1" style="text-align: right; width: 153px">终点站车道沟</span>
										<span style="display: flex; align-items: center"
											><img src="./img/时间2.png" alt="" style="width: 15px; height: 15px" /> 5:16 — 23:01</span
										>
									</div>
								</div>
								<div style="margin-top: 10px">
									<div style="display: flex; width: 100%; justify-content: space-between; align-items: center">
										<span class="key1">下行方向：全程</span>
										<span style="display: flex; align-items: center"
											><img src="./img/时间2.png" alt="" style="width: 15px; height: 15px" /> 5:28 — 22:04</span
										>
									</div>
									<div
										style="
											display: flex;
											width: 100%;
											justify-content: space-between;
											align-items: center;
											margin-top: 10px;
										"
									>
										<span class="key1" style="text-align: right; width: 153px">终点站巴沟&nbsp;&nbsp;&nbsp;</span>
										<span style="display: flex; align-items: center"
											><img src="./img/时间2.png" alt="" style="width: 15px; height: 15px" /> 5:28 — 23:48</span
										>
									</div>
									<div
										style="
											display: flex;
											width: 100%;
											justify-content: space-between;
											align-items: center;
											margin-top: 10px;
										"
									>
										<span class="key1" style="text-align: right; width: 153px">终点站成寿寺</span>
										<span style="display: flex; align-items: center"
											><img src="./img/时间2.png" alt="" style="width: 15px; height: 15px" /> 5:28 — 22:28</span
										>
									</div>
								</div>
							</div> -->
						</div>
					</div>
					<div class="item">
						<div class="title">
							<img src="./img/网约车.png" alt="" style="width: 20px; height: 20px; vertical-align: middle" />网约车
							<img
								src="./img/icon2.png"
								alt=""
								style="width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; float: right"
							/>
							<img
								src="./img/icon1.png"
								alt=""
								style="width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; float: right"
							/>
						</div>
						<div class="center online_center" style="height: 55px">
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			document.addEventListener('DOMContentLoaded', () => {
				const queryString = window.location.search
				const urlParams = new URLSearchParams(queryString)
				const info =urlParams.get('info');
				if (info) {
					// alert(info);
					deviceData = JSON.parse(info);
					
					let busCenter = document.querySelector('.bus_center');
					let busStr = "";
					deviceData.bus.lines.map((busItem) => {
						busStr += "<div class='title1'><div><span class='span1'>" + busItem.lineName + 
							"</span>至<span class='span2'>"+busItem.direction+
							"</span></div><div><img src='./img/时间.png' alt='' class='icon' />" +busItem.time+
							"</div></div><div class='title2'><div class='key'>中途站位：</div><div class='value'>"+busItem.stations.toString()+"</div></div>"
					});
					busCenter.innerHTML = busStr

					let taxiCenter = document.querySelector('.taxi_center');
					taxiCenter.innerHTML = deviceData.taxi.content;

					let onlineCenter =  document.querySelector('.online_center');
					onlineCenter.innerHTML = deviceData.onlineCarHailing.content;

					let subwayCenter =  document.querySelector('.subway_center');
					let subwayStr = "";
					
					deviceData.subway.lines.map((subItem) => {
						let subUpStr = "";
						subItem.directionUp.map((subUpItem, index) => {
							if (index == 0) {
								subUpStr += "<div class='finnaal_station'><span class='key1'>上行方向：" + subUpItem.terminalStation + "</span><span  class='common-flex'><img src='./img/时间2.png' alt='' /> " + subUpItem.time + "</span></div>";
							} else {
								subUpStr += "<div class='finnaal_station'><span class='key1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; " + subUpItem.terminalStation + "</span><span  class='common-flex'><img src='./img/时间2.png' alt='' /> " + subUpItem.time + "</span></div>";
							}
						});
						// alert(subUpStr);
						let subDownStr = ""
						subItem.directionDown.map((subDownItem, index) => {
							if (index == 0) {
								subDownStr += "<div class='finnaal_station'><span class='key1'>下行方向：" + subDownItem.terminalStation + "</span><span  class='common-flex'><img src='./img/时间2.png' alt='' />" + subDownItem.time + "</span></div>";
							} else {
								subDownStr += "<div class='finnaal_station'><span class='key1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; " + subDownItem.terminalStation + "</span><span  class='common-flex'><img src='./img/时间2.png' alt='' />" + subDownItem.time + "</span></div>";
							}
						})
						// alert(subDownStr);
						subwayStr += "<div class='box'><div class='title1'><span class='span1'>" + subItem.lineName + "</span></div><div style='margin-top: 10px'>"+subUpStr+
							subDownStr+"</div></div>";
					});
					// alert(subwayStr);
					subwayCenter.innerHTML = subwayStr;

					// left_div.append("")
				}
			})
			// let header_div = document.querySelector('header');
			// let header_name = dmList[0].name;
			// header_div.innerHTML = header_name;
			// console.log("dmList is ", dmList);
		</script>
	</body>
</html>
